<template>
  <div>
    <div class="wrapper">
      <!-- 头像位置 -->
      <div class="img">
        <img :src="$store.state.select_acchor_data.picUrl" alt="" />
      </div>
      <!-- 信息位置 -->
      <div class="info">
        <!-- 信息的头 -->
        <div class="info_title">
          <h1>{{ $store.state.select_acchor_data.name }}</h1>
        </div>
        <!-- 点击播放全部   订阅  分享按钮 -->
        <div class="btn">
          <!-- 播放全部 -->
          <div class="all_play btn_t active" @click="all_play()">
            <span class="el-icon-caret-right"></span>
            <span>播放全部</span>
            <span class="el-icon-plus"></span>
          </div>
          <!-- 订阅 -->
          <slot class="btn_t" name="love"> </slot>
          <!-- 分享 -->
          <div
            class="share btn_t"
            v-if="
              $store.state.select_acchor_data.shareCount === 0 ? false : true
            "
          >
            <span><img src="../assets/images/分享.png" alt="" /></span>
            <span>分享</span>
            <span>({{ $store.state.select_acchor_data.shareCount }})</span>
          </div>
          <!-- 下载全部 -->
          <slot class="btn_t" name="all_xz"> </slot>
        </div>

        <!-- 简介 -->

        <!-- 歌单标签 -->
        <slot name="tags"></slot>

        <slot name="time"></slot>
        <!-- 歌曲数量  播放数量 -->
        <slot name="count"></slot>

        <!-- <div class="el-icon-caret-bottom" @click="show_fn"></div> -->
        <slot name="introduce"> </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Select",
  data() {
    return {
      show: true,
    };
  },
  methods: {
    // 显示显示全部该电台的解说
    show_fn() {
      this.show = !this.show;
    },

    all_play() {
      if (this.$store.state.select_acchor_data.gd == "gd") {
        console.log(this.$store.state.select_acchor_data);
        this.gd_all_play();
        console.log("我进来了");
        return;
      }
      if (this.$store.state.select_acchor_data.leixing === "phb") {
        this.phb_all_play();
        return;
      }
      if(this.$store.state.select_acchor_data.sg === "sg"){
        console.log("我是专辑详情的全部播放");

        // console.log(this.$store.state.select_acchor_data);
        this.play_all_music(this.$store.state.select_acchor_data.all_album_music)
        return
      }
      this.play_all_anchor();
    },
    // 点击播放全部  调用接口/dj/program
    play_all_anchor() {
      this.axios({
        method: "get",
        url: "/dj/program",
        params: {
          rid: this.$store.state.select_acchor_data.id,
          limit: this.$store.state.select_acchor_program_data.count,
        },
      })
        .then((res) => {
          this;
          let arr = [];
          let len = this.$store.state.play_list.length;
          res.data.programs.forEach((v) => {
            let playtime = this.hms(v.mainSong.bMusic.playTime);
            let obj = {
              picUrl: "",
              name: "",
              playTime: "",
              song: {
                alias: [],
                artists: [{ name: "" }],
              },
              id: "",
              type: "programDetail",
              description: "",
            };
            obj.description = v.description;
            obj.id = v.mainSong.id;
            obj.name = v.name;
            obj.picUrl = v.coverUrl;
            obj.playTime = playtime;
            obj.song.alias[0] = "";
            obj.song.artists[0].name = v.radio.name;
            obj.type = "programDetail";
            arr.push(obj);
            this.$store.commit("play_list", obj);
          });

          console.log(this.$store.state.play_list[len].id);
          this.$store.commit("src_id", this.$store.state.play_list[len].id);
          this.$store.commit("musis_info", this.$store.state.play_list[len]);
          this.$store.dispatch("get_src");
          console.log(this.$store.state.play_list);
          console.log("我是煞笔", res);
        })
        .catch((err) => {
          console.log(this.$store.state.play_list[len].id);
          console.log("是不是我的错", err);
        });
    },

    // 在排行榜里面点击全部播放
    phb_all_play() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: this.$store.state.select_acchor_data.id,
        },
      })
        .then((res) => {
          console.log("我是飙升榜的数据的id", res);

          for (let i = 0; i < res.data.playlist.tracks.length; i++) {
            res.data.playlist.tracks[i].playtime = this.hms(
              res.data.playlist.tracks[i].dt
            );
          }

          for (let i = 0; i < res.data.playlist.tracks.length; i++) {
            let play_info = {
              picUrl: "",
              name: "",
              playTime: "",
              song: {
                alias: [],
                artists: [{ name: "" }],
              },
              id: "",
              type: "music",
            };
            //   图片路劲
            play_info.picUrl = res.data.playlist.tracks[i].al.picUrl;
            //   音乐名称层
            play_info.name = res.data.playlist.tracks[i].name;
            //   播放时间
            play_info.playTime = res.data.playlist.tracks[i].playtime;
            //   播放时间  毫秒形式
            play_info.playTimeS = res.data.playlist.tracks[i].dt;
            //
            play_info.song.alias = "";
            //   歌手名称
            play_info.song.artists[0].name =
              res.data.playlist.tracks[i].ar[0].name;
            //   音乐的id
            play_info.id = res.data.playlist.tracks[i].id;
            this.$store.commit("play_list", play_info);
            if (i == 0) {
              this.$store.commit("musis_info", play_info);
              this.$store.commit("src_id", play_info.id);
              this.$store.dispatch("get_src");
            }
          }
          // this.$store.commit("song_music_list", res.data.playlist.tracks);
          console.log(res);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 在歌单点击全部播放
    gd_all_play() {
      // 获取到id
      let ids = [];
      this.$store.state.select_acchor_data.trackIds.forEach((v) => {
        ids.push(v.id);
      });
      ids = ids.join();

      // 获取到歌曲的详情信息
      this.axios({
        method: "get",
        url: "/song/detail",
        params: {
          ids,
        },
      })
        .then((res) => {
          for (let i = 0; i < res.data.songs.length; i++) {
            res.data.songs[i].playtime = this.hms(res.data.songs[i].dt);
          }
          console.log("我是音乐详情的音乐列表", res);
          let arr = res.data.songs;
          // 遍历数组，次数就是arr.length - 1
          for (var j = 0; j < arr.length - 1; j++) {
            for (var i = 0; i < arr.length - 1; i++) {
              if (arr[i].dt < arr[i + 1].dt) {
                var temp = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = temp;
              }
            }
          }
          for (let k = 0; k < arr.length; k++) {
            let play_info = {
              picUrl: "",
              name: "",
              playTime: "",
              song: {
                alias: [],
                artists: [{ name: "" }],
              },
              id: "",
              type: "music",
            };
            //   图片路劲
            play_info.picUrl = arr[k].al.picUrl;
            //   音乐名称层
            play_info.name = arr[k].name;
            //   播放时间
            play_info.playTime = arr[k].playtime;
            //   播放时间  毫秒形式
            play_info.playTimeS = arr[k].dt;
            //
            play_info.song.alias = "";
            //   歌手名称
            play_info.song.artists[0].name = arr[k].ar[0].name;
            //   音乐的id
            play_info.id = arr[k].id;
            this.$store.commit("play_list", play_info);
            if (k == 0) {
              this.$store.commit("musis_info", play_info);
              this.$store.commit("src_id", play_info.id);
              this.$store.dispatch("get_src");
            }
            this.loading = false;
          }
        })
        .catch((err) => {
          console.log("我是音乐详情的音乐列表", err);
        });
    },

    // 专辑里面 点击全部播放
    play_all_music(item) {
      console.log(item);
      let len = this.$store.state.play_list.length;
      item.forEach((v) => {
        let play_info = {
          picUrl: "",
          name: "",
          playTime: "",
          song: {
            alias: [],
            artists: [{ name: "" }],
          },
          id: "",
          type: "singer_music",
        };
        play_info.picUrl = v.al.picUrl;
        //   音乐名称层
        play_info.name = v.name;
        //   播放时间
        play_info.playTime = v.playtime;
        //   播放时间  毫秒形式
        play_info.playTimeS = v.dt;
        //
        play_info.song.alias = "";
        //   歌手名称
        play_info.song.artists[0].name = v.ar[0].name;
        //   音乐的id
        play_info.id = v.id;

        this.$store.commit("play_list", play_info);
      });
      if (this.$store.state.play_list[len]) {
        this.$store.commit("src_id", this.$store.state.play_list[len].id);
        this.$store.commit("musis_info", this.$store.state.play_list[len]);
        this.$store.dispatch("get_src");
      } else {
        return;
      }
    },

    // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
  },
};
</script>

<style lang="less" scoped>
h1 {
  margin: 0;
}
.wrapper {
  display: flex;
  position: relative;
}
.img {
  height: 230px;
  width: 230px;
  // background-color: anti quewhite;
  img {
    width: 100%;
  }
}

.info {
  margin-left: 10px;
  width: 750px;
  .btn {
    display: flex;
    margin-top: 20px;
    div {
      margin-right: 20px;
      //   background-color: antiquewhite;
      padding: 0 20px;
      height: 40px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      font-size: 18px;
      border: 1px solid #ccc;
      color: #666;
      cursor: pointer;
      span {
        display: inline-block;
        line-height: 40px;
      }
    }
    .all_play {
      .el-icon-caret-right {
        color: #fff;
        font-size: 35px;
      }
      .el-icon-plus {
        margin-left: 20px;
      }
    }
    .love {
      vertical-align: middle;
      span {
        display: flex;
        align-items: center;
        img {
          height: 28px;
          //   width: 20px;
        }
      }
    }
    .share {
      span {
        display: flex;
        align-items: center;
        img {
          height: 28px;
          margin-right: 5px;
        }
      }
    }
    .active {
      background: #e4393c;
      color: #fff;
    }
  }
}

.introduce {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 20px;
  color: #666;
}
.el-icon-caret-bottom {
  position: absolute;
  right: 10px;
  cursor: pointer;
  font-size: 30px;
  color: #888;
}

// tags  标签位置
.tags {
  margin-top: 20px;
  .tag_title {
    cursor: default;
    color: #666;
  }
  .tag_name {
    cursor: pointer;
    color: skyblue;
  }
  span:nth-child(2n-1) {
     cursor: default;
    color: #666;
  }
}

// 歌曲数量  播放数量
.count {
  margin-top: 10px;
  color: #666;
  .song_count {
    display: inline-block;
    margin-right: 20px;
  }
}


</style>